<template>
    <div id='cals'>
        <mt-header :title="修改相册">
             <router-link to="/index/reset?title=班级相册" slot="left"> 
            <mt-button icon="back">返回</mt-button>
            </router-link> 
        </mt-header> 
         <!-- <h1>{{this.$route.query.id}}</h1> -->
         <!-- <h1>{{id}}</h1> -->
                  <!-- <h1>{{this.$route.query.imgs}}</h1> -->
        <div v-for='item in this.$route.query.imgs' class='calsp'>
            <img :src="item.src" alt="">
            <input type="checkbox"  ref=Cid :id='item.id'>
        </div>
        <clas-photo-component :claid=id :txt=txt :setdata='this.clasPhotoesDel' :arr=cid_arr></clas-photo-component>
    </div>  
</template>
<script>
    import ClasPhotoComponent from './ClasPhotoComponent'
    export default{
        data(){
            return {
                txt:'修改',
                cid_arr:[],
                id:''
            }
        },
        methods:{
            clasPhotoesDel(){
            console.log(this.$refs.Cid);
            var input_arr=this.$refs.Cid;         
            for(var i=0;i<input_arr.length;i++){
              if(input_arr[i].checked){
                 console.log(input_arr[i].checked);              
                   console.log(input_arr[i].id);               
                this.cid_arr.push(input_arr[i].id);
              }
            }
            console.log(this.cid_arr);
            //    var url="http://125.210.160.93:8080/SmEdu/priv/clasPhotSrc/doDeletes";
            //     this.$http.post(url,{ids:this.cid_arr}).then((res)=>{
            //      console.log(res);
            //       this.clasPhotos();
            //    }).catch((err)=>{
            //      console.log(err);
            //    })
            //    this.cid_arr=[];
            //    this.$refs.Cid.checked=false;
          },
        },
        components:{
            ClasPhotoComponent
        },
         mounted(){
            this.id=this.$route.query.id;
        }
    }
</script>
<style>
#cals .calsp{
    position: relative;
    border: 1px solid red;
    margin:.4rem;
}

#cals .calsp input{
    position: absolute;
    top:0;
    left:.55rem;
    width:.5rem;
    height:.5rem;
    font-size: .3rem;
    background:#ddd;
    border-radius: 50%;
    text-align: center;
    line-height:.5rem;
    color:greenyellow;
    font-weight: 600;
}
</style>

